import React, { useState } from 'react';
import {
  Card,
  Button,
  Input,
  Select,
  Table,
  Tag,
  Progress,
  Space,
  Row,
  Col,
  Statistic,
  Badge,
  Avatar,
  Typography,
  Divider,
  theme,
} from 'antd';
import {
  UserOutlined,
  SearchOutlined,
  SettingOutlined,
  HeartOutlined,
  StarOutlined,
  LikeOutlined,
  BellOutlined,
  SendOutlined,
  SaveOutlined,
  ReloadOutlined,
  DeleteOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons';
import { useTheme } from '../contexts/ThemeContext';
import { useUniversalNotification } from '../contexts/UniversalNotificationContext';
import { useNotificationManager } from '../utils/notificationHelpers';
import { getStorageInfo, clearNotificationStorage } from '../utils/notificationStorage';
import {
  notifySuccess,
  notifyError,
  notifyInfo,
  notifyWarning,
  messageSuccess,
  messageError,
  messageInfo,
  messageWarning
} from '../utils/notification';
import DataConsistencyTest from './DataConsistencyTest';
import SyncTaskProgressDemo from './SyncTaskProgressDemo';

const { Title, Text } = Typography;
const { Option } = Select;

const UIShowcase: React.FC = () => {
  const { token } = theme.useToken();
  const { currentTheme } = useTheme();
  const { clear: clearAllNotifications } = useUniversalNotification();
  const notificationManager = useNotificationManager();
  const [customMessage, setCustomMessage] = useState('');
  const [customTitle, setCustomTitle] = useState('');
  const [storageInfo, setStorageInfo] = useState(getStorageInfo());
  const [customDescription, setCustomDescription] = useState('');
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '标签',
      key: 'tags',
      dataIndex: 'tags',
      render: (tags: string[]) => (
        <>
          {tags.map((tag) => (
            <Tag color="blue" key={tag}>
              {tag}
            </Tag>
          ))}
        </>
      ),
    },
  ];

  const data = [
    {
      key: '1',
      name: '张三',
      age: 32,
      address: '北京市朝阳区',
      tags: ['开发者', 'React'],
    },
    {
      key: '2',
      name: '李四',
      age: 28,
      address: '上海市浦东新区',
      tags: ['设计师', 'UI/UX'],
    },
    {
      key: '3',
      name: '王五',
      age: 35,
      address: '深圳市南山区',
      tags: ['产品经理', '敏捷'],
    },
  ];

  // 两阶段生命周期测试函数
  const testTwoStageLifecycle = () => {
    notificationManager.createNotification({
      type: 'info',
      status: 'running',
      title: '两阶段生命周期测试',
      message: '这是一个测试两阶段生命周期的通知：先显示在右上角，然后过渡到Dynamic Island',
      description: '观察通知如何从ant-notification平滑过渡到Dynamic Island',
      config: {
        displayStrategy: 'both', // 强制使用两阶段显示
        persistent: true,
        antNotificationDuration: 4.0,
        transitionDelay: 3200,
      }
    });
  };

  const testErrorTwoStage = () => {
    notificationManager.createNotification({
      type: 'error',
      status: 'error',
      title: '错误通知两阶段测试',
      message: '这是一个错误类型的两阶段通知',
      description: '错误通知也会经历两阶段生命周期：ant-notification → Dynamic Island',
      config: {
        displayStrategy: 'both',
        persistent: true,
        antNotificationDuration: 4.0,
        transitionDelay: 3200,
      }
    });
  };

  const testWarningTwoStage = () => {
    notificationManager.createNotification({
      type: 'warning',
      status: 'warning',
      title: '警告通知两阶段测试',
      message: '这是一个警告类型的两阶段通知',
      description: '警告通知的两阶段过渡效果演示',
      config: {
        displayStrategy: 'both',
        persistent: true,
        antNotificationDuration: 4.0,
        transitionDelay: 3200,
      }
    });
  };

  // 数据血缘解析两阶段测试
  const testDataLineageTwoStage = () => {
    const notificationId = notificationManager.add({
      type: 'progress',
      status: 'running',
      title: '数据血缘解析',
      message: '正在解析数据库表结构和关系',
      description: '这是数据血缘解析的两阶段生命周期演示',
      config: {
        displayStrategy: 'both',
        persistent: true,
        antNotificationDuration: 4.0,
        transitionDelay: 3200,
      },
      progress: 0,
    });

    // 模拟数据血缘解析进度
    let progress = 0;
    const stages = [
      '初始化解析引擎',
      '扫描数据库表',
      '分析表关系',
      '构建血缘图',
      '保存到缓存'
    ];

    const interval = setInterval(() => {
      progress += 20;
      const currentStage = stages[Math.floor(progress / 20) - 1] || '完成';

      // 使用正确的update方法
      notificationManager.update(notificationId, {
        progress: progress,
        title: currentStage,
        description: `${progress}% 完成 - ${currentStage}`,
        statistics: {
          processedTables: Math.floor(progress / 4),
          totalTables: 25,
          currentStage: currentStage
        }
      });

      if (progress >= 100) {
        clearInterval(interval);
        notificationManager.update(notificationId, {
          status: 'success',
          title: '数据血缘解析完成',
          description: '成功解析25个表，156个关系',
          progress: 100,
          statistics: {
            tables: 25,
            relations: 156,
            duration: 8500
          }
        });

        // 10秒后自动移除
        setTimeout(() => {
          notificationManager.remove(notificationId);
        }, 10000);
      }
    }, 1200);
  };

  // Dynamic Island 测试函数
  const testDataLineageAnalysis = () => {
    const id = notificationManager.createAnalysis('数据血缘分析', 'Dinky数据库');
    const stages = ['连接数据库', '扫描表结构', '分析字段关系', '构建血缘图', '优化布局'];
    let progress = 0;
    let stageIndex = 0;

    const interval = setInterval(() => {
      progress += Math.random() * 20;
      if (progress >= 100) {
        progress = 100;
        notificationManager.complete(id, true);
        clearInterval(interval);
      } else {
        const currentStage = stages[Math.floor((progress / 100) * stages.length)];
        notificationManager.updateProgress(id, Math.floor(progress), currentStage);
      }
    }, 800);
  };

  const testSystemMonitoring = () => {
    notificationManager.createNotification({
      type: 'monitoring',
      title: '系统监控',
      description: 'CPU使用率: 85%',
      status: 'warning',
      persistent: true,
      autoClose: false,
    });
  };

  const testTaskProgress = () => {
    const id = notificationManager.createProgress({
      type: 'task',
      title: '数据导入任务',
      description: '正在导入用户数据...',
    });

    let progress = 0;
    const interval = setInterval(() => {
      progress += Math.random() * 15;
      if (progress >= 100) {
        progress = 100;
        clearInterval(interval);
        notificationManager.complete(id, true, '导入完成');
      } else {
        notificationManager.updateProgress(id, Math.floor(progress), '导入中', `正在导入用户数据... ${Math.floor(progress)}%`);
      }
    }, 600);
  };

  const testSyncNotification = () => {
    notificationManager.createDataSync('本地数据库', '外部系统');
  };

  // 测试持久化功能
  const testPersistentNotification = () => {
    notificationManager.createNotification({
      type: 'monitoring',
      title: '持久化测试',
      description: '这个通知会在页面刷新后保持显示',
      status: 'running',
      persistent: true,
      autoClose: false,
    });

    // 更新存储信息
    setTimeout(() => {
      setStorageInfo(getStorageInfo());
    }, 100);
  };

  // 清理存储
  const handleClearStorage = () => {
    clearNotificationStorage();
    clearAllNotifications();
    setStorageInfo(getStorageInfo());
    notifySuccess('存储已清理', '所有持久化通知已删除');
  };

  // 刷新页面测试
  const handleRefreshTest = () => {
    if (storageInfo.notificationCount > 0) {
      window.location.reload();
    } else {
      notifyWarning('请先创建持久化通知', '创建一些通知后再测试页面刷新功能');
    }
  };

  // 模拟数据血缘解析过程
  const simulateLineageAnalysis = () => {
    const analysisId = notificationManager.createAnalysis('数据血缘分析', 'Doris数据仓库');
    const startTime = Date.now();

    const tables = [
      'user_behavior_log',
      'product_catalog',
      'order_details',
      'payment_records',
      'user_profiles',
      'sales_summary'
    ];

    let currentTableIndex = 0;
    let progress = 0;

    const updateProgress = () => {
      if (currentTableIndex < tables.length) {
        const currentTable = tables[currentTableIndex];
        progress = Math.round(((currentTableIndex + 1) / tables.length) * 100);

        notificationManager.updateProgress(
          analysisId,
          progress,
          '解析表结构',
          currentTable,
          {
            processed: currentTableIndex + 1,
            total: tables.length,
          }
        );

        currentTableIndex++;
        setTimeout(updateProgress, 1500); // 每1.5秒处理一个表
      } else {
        // 分析完成
        const duration = Date.now() - startTime;
        const relations = Math.floor(Math.random() * 20) + 15; // 15-35条血缘关系

        notificationManager.complete(analysisId, true, undefined, {
          tables: tables.length,
          relations,
          duration
        });
      }
    };

    // 开始模拟进度更新
    setTimeout(updateProgress, 1000);
  };

  // 模拟失败的血缘解析
  const simulateFailedAnalysis = () => {
    const analysisId = notificationManager.createAnalysis('数据血缘分析', 'MySQL数据库');

    setTimeout(() => {
      notificationManager.updateProgress(analysisId, 25, '连接数据源');
    }, 1000);

    setTimeout(() => {
      notificationManager.fail(analysisId, '数据库连接超时，请检查网络配置');
    }, 3000);
  };

  // 模拟可暂停的血缘解析
  const simulatePausableAnalysis = () => {
    const analysisId = notificationManager.createAnalysis('数据流分析', 'Kafka数据流');
    let isPaused = false;
    let progress = 0;

    const updateProgress = () => {
      if (!isPaused && progress < 100) {
        progress += 10;
        notificationManager.updateProgress(
          analysisId,
          progress,
          '分析数据流',
          `topic_${Math.floor(progress / 10)}`
        );

        if (progress < 100) {
          setTimeout(updateProgress, 1000);
        } else {
          notificationManager.complete(analysisId, true, undefined, {
            tables: 8,
            relations: 12
          });
        }
      }
    };

    // 3秒后暂停
    setTimeout(() => {
      isPaused = true;
      notificationManager.pause(analysisId, progress);

      // 5秒后恢复
      setTimeout(() => {
        isPaused = false;
        notificationManager.resume(analysisId, progress, '恢复分析数据流');
        setTimeout(updateProgress, 500);
      }, 5000);
    }, 3000);

    setTimeout(updateProgress, 1000);
  };

  return (
    <div style={{ padding: '24px' }}>
      <Title level={2} style={{ marginBottom: 32 }}>
        UI组件展示
      </Title>

      {/* 按钮展示 */}
      <Card title="按钮组件" style={{ marginBottom: 24 }} className="hover-lift">
        <Space wrap>
          <Button type="primary">主要按钮</Button>
          <Button>默认按钮</Button>
          <Button type="dashed">虚线按钮</Button>
          <Button type="text">文本按钮</Button>
          <Button type="link">链接按钮</Button>
          <Button type="primary" icon={<SearchOutlined />}>
            搜索
          </Button>
          <Button type="primary" shape="round">
            圆角按钮
          </Button>
          <Button type="primary" shape="circle" icon={<UserOutlined />} />
        </Space>
      </Card>

      {/* 输入框展示 */}
      <Card title="输入组件" style={{ marginBottom: 24 }} className="hover-lift">
        <Row gutter={16}>
          <Col span={8}>
            <Input placeholder="请输入内容" />
          </Col>
          <Col span={8}>
            <Input.Search placeholder="搜索内容" onSearch={() => {}} />
          </Col>
          <Col span={8}>
            <Select defaultValue="option1" style={{ width: '100%' }}>
              <Option value="option1">选项1</Option>
              <Option value="option2">选项2</Option>
              <Option value="option3">选项3</Option>
            </Select>
          </Col>
        </Row>
      </Card>

      {/* 统计展示 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card className="hover-lift">
            <Statistic
              title="活跃用户"
              value={11280}
              prefix={<UserOutlined />}
              suffix="人"
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card className="hover-lift">
            <Statistic
              title="总收入"
              value={9280000}
              precision={2}
              prefix="¥"
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card className="hover-lift">
            <Statistic
              title="点赞数"
              value={1128}
              prefix={<LikeOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card className="hover-lift">
            <Statistic
              title="收藏数"
              value={93}
              prefix={<HeartOutlined />}
              suffix="个"
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 进度条展示 */}
      <Card title="进度条" style={{ marginBottom: 24 }} className="hover-lift">
        <div style={{ marginBottom: 16 }}>
          <Text>CPU 使用率</Text>
          <Progress percent={30} />
        </div>
        <div style={{ marginBottom: 16 }}>
          <Text>内存使用率</Text>
          <Progress percent={50} status="active" />
        </div>
        <div style={{ marginBottom: 16 }}>
          <Text>磁盘使用率</Text>
          <Progress percent={70} status="exception" />
        </div>
        <div>
          <Text>网络带宽</Text>
          <Progress percent={100} />
        </div>
      </Card>

      {/* 表格展示 */}
      <Card title="表格组件" style={{ marginBottom: 24 }} className="hover-lift">
        <Table columns={columns} dataSource={data} />
      </Card>

      {/* 标签和徽章展示 */}
      <Card title="标签和徽章" style={{ marginBottom: 24 }} className="hover-lift">
        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          <div>
            <Text strong>标签：</Text>
            <Space wrap style={{ marginLeft: 8 }}>
              <Tag color="magenta">React</Tag>
              <Tag color="red">Vue</Tag>
              <Tag color="volcano">Angular</Tag>
              <Tag color="orange">TypeScript</Tag>
              <Tag color="gold">JavaScript</Tag>
              <Tag color="lime">Node.js</Tag>
              <Tag color="green">Python</Tag>
              <Tag color="cyan">Java</Tag>
              <Tag color="blue">Go</Tag>
              <Tag color="geekblue">Rust</Tag>
              <Tag color="purple">C++</Tag>
            </Space>
          </div>
          <Divider />
          <div>
            <Text strong>徽章：</Text>
            <Space style={{ marginLeft: 8 }}>
              <Badge count={5}>
                <Avatar shape="square" icon={<UserOutlined />} />
              </Badge>
              <Badge count={0} showZero>
                <Avatar shape="square" icon={<UserOutlined />} />
              </Badge>
              <Badge count={<StarOutlined style={{ color: '#f5222d' }} />}>
                <Avatar shape="square" icon={<UserOutlined />} />
              </Badge>
              <Badge dot>
                <Avatar shape="square" icon={<UserOutlined />} />
              </Badge>
            </Space>
          </div>
        </Space>
      </Card>

      {/* 通知测试功能 */}
      <Card
        title={
          <Space>
            <BellOutlined />
            通知系统测试
          </Space>
        }
        style={{ marginBottom: 24 }}
        className="hover-lift"
      >
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <div>
            <Text strong>当前主题：</Text>
            <Tag color={currentTheme.isDark ? 'blue' : 'green'} style={{ marginLeft: 8 }}>
              {currentTheme.name} {currentTheme.isDark ? '(深色)' : '(浅色)'}
            </Tag>
          </div>

          <Divider />

          <div>
            <Title level={5}>预设通知测试</Title>
            <Space direction="vertical" size="middle" style={{ width: '100%' }}>
              <div>
                <Text strong>紧凑通知 (短文本)：</Text>
                <Space wrap style={{ marginLeft: 8 }}>
                  <Button
                    type="primary"
                    onClick={() => messageSuccess('✅ 成功通知')}
                  >
                    成功
                  </Button>
                  <Button
                    danger
                    onClick={() => messageError('❌ 错误通知')}
                  >
                    错误
                  </Button>
                  <Button
                    onClick={() => messageInfo('💡 信息通知')}
                  >
                    信息
                  </Button>
                  <Button
                    onClick={() => messageWarning('⚠️ 警告通知')}
                  >
                    警告
                  </Button>
                </Space>
              </div>

              <div>
                <Text strong>详细通知 (带描述)：</Text>
                <Space wrap style={{ marginLeft: 8 }}>
                  <Button
                    type="primary"
                    onClick={() => notifySuccess('🎉 操作成功', '您的操作已成功完成，数据已保存')}
                  >
                    成功
                  </Button>
                  <Button
                    danger
                    onClick={() => notifyError('💥 操作失败', '操作过程中发生错误，请稍后重试')}
                  >
                    错误
                  </Button>
                  <Button
                    onClick={() => notifyInfo('📢 系统通知', '这是一条重要的系统信息，请注意查看')}
                  >
                    信息
                  </Button>
                  <Button
                    onClick={() => notifyWarning('⚡ 注意事项', '请注意相关操作可能带来的影响')}
                  >
                    警告
                  </Button>
                </Space>
              </div>

              <div>
                <Text strong>自适应大小测试：</Text>
                <Space wrap style={{ marginLeft: 8 }}>
                  <Button
                    onClick={() => messageSuccess('短')}
                  >
                    极短文本
                  </Button>
                  <Button
                    onClick={() => notifyInfo('中等长度的标题', '这是一个中等长度的描述文本，用于测试通知的自适应大小功能')}
                  >
                    中等文本
                  </Button>
                  <Button
                    onClick={() => notifyWarning(
                      '这是一个很长的标题文本用于测试自适应大小功能',
                      '这是一个很长的描述文本，用于测试通知系统在处理长文本时的自适应大小功能，确保在所有主题下都能正确显示，包括极简现代、专业深色、科技蓝、新拟物和自然绿色主题'
                    )}
                  >
                    长文本
                  </Button>
                </Space>
              </div>
            </Space>
          </div>

          <Divider />

          <div>
            <Title level={5}>自定义通知测试</Title>
            <Space direction="vertical" size="middle" style={{ width: '100%' }}>
              <Row gutter={16}>
                <Col span={12}>
                  <Text strong>自定义消息：</Text>
                  <Input
                    placeholder="输入自定义消息内容"
                    value={customMessage}
                    onChange={(e) => setCustomMessage(e.target.value)}
                    style={{ marginTop: 8 }}
                  />
                </Col>
                <Col span={12}>
                  <Space>
                    <Button
                      type="primary"
                      icon={<SendOutlined />}
                      onClick={() => customMessage && messageSuccess(customMessage)}
                      disabled={!customMessage.trim()}
                    >
                      发送成功通知
                    </Button>
                    <Button
                      danger
                      icon={<SendOutlined />}
                      onClick={() => customMessage && messageError(customMessage)}
                      disabled={!customMessage.trim()}
                    >
                      发送错误通知
                    </Button>
                  </Space>
                </Col>
              </Row>

              <Row gutter={16}>
                <Col span={8}>
                  <Text strong>自定义标题：</Text>
                  <Input
                    placeholder="输入通知标题"
                    value={customTitle}
                    onChange={(e) => setCustomTitle(e.target.value)}
                    style={{ marginTop: 8 }}
                  />
                </Col>
                <Col span={8}>
                  <Text strong>自定义描述：</Text>
                  <Input.TextArea
                    placeholder="输入通知描述"
                    value={customDescription}
                    onChange={(e) => setCustomDescription(e.target.value)}
                    rows={2}
                    style={{ marginTop: 8 }}
                  />
                </Col>
                <Col span={8}>
                  <div style={{ marginTop: 32 }}>
                    <Space>
                      <Button
                        type="primary"
                        onClick={() => customTitle && notifySuccess(customTitle, customDescription)}
                        disabled={!customTitle.trim()}
                      >
                        发送详细通知
                      </Button>
                      <Button
                        onClick={() => customTitle && notifyInfo(customTitle, customDescription)}
                        disabled={!customTitle.trim()}
                      >
                        信息通知
                      </Button>
                    </Space>
                  </div>
                </Col>
              </Row>
            </Space>
          </div>
        </Space>
      </Card>

      {/* Dynamic Island 通知测试 */}
      <Card title="Dynamic Island 通知系统测试" style={{ marginTop: 16 }}>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <div>
            <Title level={4}>🏝️ iOS风格Dynamic Island通知系统</Title>
            <Text type="secondary">
              真正的iOS灵动岛效果：胶囊形状(默认) → hover展开 → 圆角矩形详情显示
            </Text>
            <br />
            <Text type="secondary">
              💡 查看效果：点击下方按钮创建通知，然后将鼠标悬停在Header右侧的Dynamic Island上
            </Text>
            <br />
            <Text type="secondary">
              🔄 持久化功能：通知状态会自动保存到本地存储，页面刷新后自动恢复
            </Text>
            <br />
            <Text type="secondary">
              🖱️ 滚轮交互：在Dynamic Island上使用鼠标滚轮可展开并切换通知（上滚/下滚）
            </Text>
          </div>

          <Row gutter={16}>
            <Col span={6}>
              <Button
                type="primary"
                block
                onClick={testDataLineageAnalysis}
                icon={<SendOutlined />}
              >
                数据血缘分析
              </Button>
            </Col>
            <Col span={6}>
              <Button
                block
                onClick={testSystemMonitoring}
                icon={<BellOutlined />}
              >
                系统监控警告
              </Button>
            </Col>
            <Col span={6}>
              <Button
                block
                onClick={testTaskProgress}
                icon={<SettingOutlined />}
              >
                任务进度通知
              </Button>
            </Col>
            <Col span={6}>
              <Button
                block
                onClick={testSyncNotification}
                icon={<HeartOutlined />}
              >
                数据同步通知
              </Button>
            </Col>
          </Row>

          <Row gutter={16} style={{ marginTop: 16 }}>
            <Col span={6}>
              <Button
                type="primary"
                block
                onClick={testPersistentNotification}
                icon={<SaveOutlined />}
              >
                持久化测试通知
              </Button>
            </Col>
            <Col span={6}>
              <Button
                block
                onClick={handleRefreshTest}
                icon={<ReloadOutlined />}
                disabled={storageInfo.notificationCount === 0}
              >
                刷新页面测试
              </Button>
            </Col>
            <Col span={6}>
              <Button
                danger
                block
                onClick={handleClearStorage}
                icon={<DeleteOutlined />}
              >
                清理存储
              </Button>
            </Col>
            <Col span={6}>
              <Button
                block
                onClick={() => setStorageInfo(getStorageInfo())}
                icon={<InfoCircleOutlined />}
              >
                存储信息
              </Button>
            </Col>
          </Row>

          <Divider>两阶段生命周期测试</Divider>

          <Row gutter={16}>
            <Col span={6}>
              <Button
                type="primary"
                block
                onClick={testTwoStageLifecycle}
                icon={<BellOutlined />}
              >
                基础两阶段通知
              </Button>
            </Col>
            <Col span={6}>
              <Button
                block
                onClick={testErrorTwoStage}
                icon={<BellOutlined />}
                danger
              >
                错误两阶段通知
              </Button>
            </Col>
            <Col span={6}>
              <Button
                block
                onClick={testWarningTwoStage}
                icon={<BellOutlined />}
              >
                警告两阶段通知
              </Button>
            </Col>
            <Col span={6}>
              <Button
                type="primary"
                block
                onClick={testDataLineageTwoStage}
                icon={<BellOutlined />}
                style={{ background: '#52c41a', borderColor: '#52c41a' }}
              >
                数据血缘解析
              </Button>
            </Col>
          </Row>

          <Divider>数据血缘解析测试</Divider>

          <Row gutter={16}>
            <Col span={8}>
              <Button
                type="primary"
                block
                onClick={simulateLineageAnalysis}
                icon={<BellOutlined />}
              >
                模拟血缘解析
              </Button>
            </Col>
            <Col span={8}>
              <Button
                block
                onClick={simulateFailedAnalysis}
                icon={<BellOutlined />}
                danger
              >
                模拟解析失败
              </Button>
            </Col>
            <Col span={8}>
              <Button
                block
                onClick={simulatePausableAnalysis}
                icon={<BellOutlined />}
              >
                模拟暂停/恢复
              </Button>
            </Col>
          </Row>

          <Row gutter={16}>
            <Col span={12}>
              <Text strong>自定义Dynamic Island通知：</Text>
              <Input
                placeholder="输入通知标题"
                value={customTitle}
                onChange={(e) => setCustomTitle(e.target.value)}
                style={{ marginTop: 8, marginBottom: 8 }}
              />
              <Input.TextArea
                placeholder="输入通知描述"
                value={customDescription}
                onChange={(e) => setCustomDescription(e.target.value)}
                rows={2}
              />
            </Col>
            <Col span={12}>
              <div style={{ marginTop: 32 }}>
                <Space>
                  <Button
                    type="primary"
                    onClick={() => customTitle && addNotification({
                      type: 'progress',
                      title: customTitle,
                      description: customDescription,
                      status: 'running',
                      persistent: true,
                      autoClose: false,
                    })}
                    disabled={!customTitle.trim()}
                  >
                    创建持久通知
                  </Button>
                  <Button
                    onClick={() => customTitle && addNotification({
                      type: 'task',
                      title: customTitle,
                      description: customDescription,
                      status: 'success',
                      persistent: false,
                      autoClose: true,
                    })}
                    disabled={!customTitle.trim()}
                  >
                    创建临时通知
                  </Button>
                  <Button
                    danger
                    onClick={clearAllNotifications}
                  >
                    清除所有通知
                  </Button>
                </Space>
              </div>
            </Col>
          </Row>

          <div>
            <Text type="secondary">
              💡 提示：持久通知会在Header中以Dynamic Island形式显示，支持展开查看详情、暂停/恢复操作
            </Text>
            <br />
            <Text type="secondary">
              📊 存储状态：{storageInfo.hasStoredNotifications ?
                `已存储 ${storageInfo.notificationCount} 个通知 (${Math.round(storageInfo.storageSize / 1024 * 100) / 100} KB)` :
                '暂无存储的通知'}
            </Text>
          </div>
        </Space>
      </Card>

      {/* 数据一致性测试 */}
      <Card title="数据一致性测试" style={{ marginTop: 16 }}>
        <DataConsistencyTest />
      </Card>

      {/* 数据同步任务进度演示 */}
      <SyncTaskProgressDemo />
    </div>
  );
};

export default UIShowcase;
